<template>
	<view class="menu-item-box flex-row-between" @click="clickItem">
		<view class="menu-name flex-row">
			<image class="menu-icon" :src="menu.icon" mode="aspectFit"></image>
			<view class="name">{{menu.name}}</view>
		</view>
		<uni-icons type="right"></uni-icons>
	</view>
</template>

<script>
	export default {
		props: {
			/* 菜单属性 */
			menu: {
				type: Object,
				default: () => {}
			}
		},
		methods: {
			clickItem() {
				uni.navigateTo({
					url: this.menu.url,
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.menu-item-box {
		padding: 28rpx 0;
		.name {
			font-size: 34rpx;
		}

		.menu-icon {
			width: 55rpx;
			height: 55rpx;
			margin-right: 55rpx;
		}
	}
</style>